<template>
  <view class="rank-layout">
    <my-header title="领主榜单"></my-header>
    <my-content class="content">
      <view class="tab">
        <view class="tab_item" :class="[mode == item.id ? 'active' :'']" @click="changeTab(item.id)" v-for="item in tabData" :key="item.id">
          <view class="tab_title">{{item.title}}</view>
<!--          <view class="tab_border"></view>-->
        </view>
      </view>
      <scroll-view class="scroll" refresher-background="" :refresher-triggered="refreshStatus" @refresherrefresh="refresh" :refresher-enabled="true" scroll-y="true" @scrolltolower="lower">
        <view class="balance_box" v-if="balanceData.length > 0">
          <view class="balance_header">
            <view class="balance_header_item" v-if="mode == 1">排名</view>
            <view class="balance_header_item">用户</view>
            <view class="balance_header_item">收益</view>
          </view>
          <view class="balance_item" v-for="(item,index) in balanceData" :key="item.id">
            <image class="left icon" src="http://www.qixdian.cn/upload/20231005/651e7bf5be56d.png"  v-if="mode == 1 && index == 0"></image>
            <image class="left icon" src="http://www.qixdian.cn/upload/20231005/651e7bfe17dc2.png" v-if="mode == 1 && index == 1"></image>
            <image class="left icon" src="http://www.qixdian.cn/upload/20231005/651e7c07474e4.png" v-if="mode == 1 && index == 2"></image>
            <view class="left"  v-if="mode == 1 && index > 2">{{index + 1}}</view>
            <view class="center">
              <image  :src="item.avatar" class="avatar"></image>
              <view class="user_info">
                <view>{{item.nickname}}</view>
                <view class="time_box">占榜 <text class="time">{{item.time}}</text></view>
              </view>
            </view>
            <view class="right">
              <view class="right_top">
                <view>{{item.amount}}</view>
                <image mode="widthFix" class="amount_icon" src="http://www.qixdian.cn/upload/20230831/64f09c86e3a28.png"></image>
              </view>
              <view class="right_bottom end" v-if="item.status == 1">已结算</view>
              <view class="right_bottom ing" v-if="item.status == 0">待结算</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </my-content>
  </view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data() {
			return {
				mode:2,
				blind_box_id:'',
				balanceData:[],
				tabData:[{id:2,title:'领主记录'},{id:1,title:'领主榜单'}],
				last_page:0,
				page:1,
				refreshStatus:false
			}
		},
		onLoad(option) {
			this.blind_box_id = option.blind_box_id;
		},
		onShow(){
			this.refresh()
		},
		
		methods: {
			changeTab(id){
				if (this.mode != id) {
					this.mode = id;
					this.page = 1;
					this.getBalance(2)
				}
			},
			lower(){
				if (this.page >= this.last_page) {
					this.show('没有更多数据了');
					return
				}
				this.page++;
				this.getBalance(1)
			},
			refresh(){
				this.refreshStatus = true;
				this.page = 1;
				this.getBalance(2)
			},
			getBalance(type){
				uni.showLoading({
					title:'数据加载中'
				})
				api.blindBoxRanks.index({page:this.page,type:this.mode,blind_box_id:this.blind_box_id}).then(res => {
					if (res.code === 200) {
						uni.hideLoading()
						if (type == 1) {
							this.balanceData = this.balanceData.concat(res.data.data)
						} else {
							this.balanceData = res.data.data
						}
						this.last_page = res.data.last_page
						this.refreshStatus = false;
						if (this.last_page == this.page) {
							this.show('没有更多数据了')
						}
					}
				}).catch(error => {
					console.log(error)
				})
			}
		},
	}
</script>

<style lang="scss">
.rank-layout {
  height: 100vh;
}
	.content {
		height: 100vh;
		background-color: #141414;
    display: flex;
    flex-direction: column;
		.tab {
			display: flex;
			/*background-color: #fff;*/
			justify-content: space-around;
			align-items: center;
			height: 80rpx;
			font-size: 30rpx;
			/*position: fixed;
			top: 0;*/
			width: 100%;
		/*	left: 0;*/
			z-index: 100;
			.tab_item {
        width: 345rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
        color: white;
				.tab_border {
					width: 50rpx;
					height: 5rpx;
				}
				&.active {
          background-image: url("https://www.dingxians.cn/upload/user_static/user/bg-tab-active.png");
          background-size: 100% 100%;
					/*.tab_border {
						background-color: #A361F6;
					}*/
					.tab_title {
						font-weight: bold;
						color: #DED000;

					}
				}
			}
		}
		
		.scroll {
      flex: 1;
			/*position:fixed;
			top: 100rpx;*/
			overflow-y: hidden;
			&::-webkit-scrollbar {
			  display: none;
			}
		}
		
		.balance_box {
			display: flex;
			flex-direction: column;
			/*height: calc(100vh - 150rpx);*/
			/*background-color: #fff;*/
      color: white;
			
			.balance_header {
				display:flex;
				align-items: center;
				justify-content: space-between;
				margin:20rpx;
			}
			.balance_item {
				display: flex;
				/*background-color: #fff;*/
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				width: 710rpx;
				padding: 20rpx;
				/*border-bottom: 1rpx solid #808080;*/
				.left {
					width: 50rpx;
					height: 50rpx;
				}
				.center {
					display: flex;
					align-items: center;
					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						
					}
					.user_info {
						display: flex;
						flex-direction: column;
						margin-left: 10rpx;
						.time_box {
							font-size: 24rpx;
							.time {
								color:red;
								margin-left:10rpx;
							}
						}
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					align-items: center;
					.right_top {
						display: flex;
						align-items: center;
						.amount_icon {
							width: 40rpx;
							height: 50rpx;
							margin-left: 10rpx;
						}
					}
					.right_bottom {
						font-size: 24rpx;
						&.ing {
							color:red;
						}
						&.end {
							color:green;
						}
					}
					
				}
			}
		}
	}
</style>